import React from 'react'
import moment from 'moment'
import {message, Table, Button, Form, Input, Select} from 'antd'
import {fetchPost} from '../../../utils/request'

const Option = Select.Option;
const FormItem = Form.Item

class PreparePaymentList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataList: null,
      page: {
        currentPage: 1,
        pageSize: 10,
        totalCount: 0
      },
      findType: null,
      inputValue: null,
      days: null,
    }
  }

  componentDidMount() {
    let initData = {
      'findType': null,
      'inputValue': null,
      'days': null,
    };
    this.getData(initData)
  }

  getData(data) {
    fetchPost(`/bill/pre/repayment?currentPage=${this.state.page.currentPage}&pageSize=${this.state.page.pageSize}`, data).then(
      (res) => {
        if (res.code === 0) {
          if (res.data != null && res.data.pOrderPrePaymentVOS != null) {
            this.setState({
              dataList: res.data.pOrderPrePaymentVOS,
              page: {
                ...this.state.page,
                totalCount: res.data.page.totalCount || 0
              },
            })
          } else {
            this.setState({
              dataList: null,
              page: {
                currentPage: 1,
                pageSize: 10,
                totalCount: 0
              },
            })
          }
        }
      }
    );
  }

  handleChange = (value) => {
    this.setState({
      days: value,
      page: {
        ...this.state.page,
        currentPage: 1
      },
      findType: null,
      inputValue: null,
    }, () => {
      let obj = {
        'days': this.state.days,
      };
      this.getData(obj)
    });
  };

  groupSearch() {
    const {validateFields} = this.props.form;
    validateFields((errors, values) => {
      if (values.inputValue != '' && values.findType == '') {
        message.error('please choose the filter first');
        return;
      }
      if (values.findType != '' && values.inputValue == '') {
        message.error('please enter the filter value');
        return;
      }
      if (values.findType == '' && values.inputValue == '') {
        message.error('please choose the filter first');
        return;
      }
      if (errors !== null) {
        message.error('search error');
      } else {
        this.setState({
          findType: values.findType === '' ? null : values.findType,
          inputValue: values.inputValue === '' ? null : values.inputValue,
          page: {
            ...this.state.page,
            currentPage: 1
          }
        }, () => {
          let obj = {
            'findType': this.state.findType,
            'inputValue': this.state.inputValue,
          };
          this.getData(obj);
        })
      }
    })
  }

  nextpage(current) {
    this.setState({
      page: {
        ...this.state.page,
        currentPage: current
      }
    }, () => {
      let obj = {
        'findType': this.state.findType,
        'inputValue': this.state.inputValue,
        'days': this.state.days,
      };
      this.getData(obj)
    })
  }

  render() {
    let self = this;

    let dataSource = [];
    if (this.state.dataList != null) {
      let dataList = this.state.dataList;
      dataList.map(data => {
        dataSource.push({
          kye: data.tradeNo,
          tradeNo: data.tradeNo,
          repaymentCapital: data.repaymentCapital,
          repaymentDate: data.repaymentDate,
          name: data.name,
          phone: data.phone,
          email: data.email,
        })
      })
    }

    const columns = [{
      title: 'TradeNo',
      dataIndex: 'tradeNo',
      key: 'tradeNo',
    }, {
      title: 'Repayment Capital',
      dataIndex: 'repaymentCapital',
      key: 'repaymentCapital',
    }, {
      title: 'Repayment Date',
      dataIndex: 'repaymentDate',
      key: 'repaymentDate',
    }, {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: 'Phone',
      dataIndex: 'phone',
      key: 'phone',
    }, {
      title: 'Email',
      dataIndex: 'email',
      key: 'email',
    }];

    const pagination = {
      current: this.state.page.currentPage,
      total: this.state.page.totalCount || 0,
      pageSize: this.state.page.pageSize,
      showSizeChanger: false,
      showQuickJumper: true,
      showTotal (total) {
        return `Total ${total} `
      },
      onChange (current) {
        self.nextpage(current)
      }
    };

    const {getFieldDecorator} = this.props.form;

    return (
      <div>
        <div style={{paddingTop: 20, paddingBottom: 20}}>
          <span style={{marginRight: 10}}>Before Payment Days:</span>
          <Select size='large' defaultValue={null} style={{width: 120}} onChange={this.handleChange}>
            <Option value={null}>None</Option>
            <Option value="1">1 Days</Option>
            <Option value="2">2 Days</Option>
            <Option value="3">3 Days</Option>
          </Select>

          <Form layout='inline' style={{padding: '10px 0 10px 0', display: 'inline', marginLeft: 20}}>
            <FormItem
              label='Filter'
            >
              {getFieldDecorator('findType', {
                initialValue: ''
              })(
                <Select style={{width: 140}}>
                  <Option value=''>Please Choose</Option>
                  <Option value='mobile'>Phone</Option>
                  <Option value='email'>Email</Option>
                </Select>
              )}
            </FormItem>
            <FormItem
              label=''
            >
              {getFieldDecorator('inputValue', {
                initialValue: ''
              })(
                <Input placeholder='Please Enter' style={{width: 180}}/>
              )}
            </FormItem>
            <FormItem>
              <Button type='primary' icon='search' onClick={() => {
                this.groupSearch()
              }}>Search</Button>
            </FormItem>
          </Form>
        </div>
        <Table
          bordered
          dataSource={dataSource}
          columns={columns}
          pagination={pagination}
          size='small'
        />
      </div>);
  }
}

PreparePaymentList = Form.create()(PreparePaymentList);
export default PreparePaymentList
